import { useRequest } from 'alova/client'
import { VChart } from '@visactor/react-vchart'
import { useState, useEffect, useRef } from 'react'

import { Http } from '../Utils/Api'
import { AdminRouter } from '../Config/default'
import { ChartsConfig } from '../Config/ChartsConfig'
import { getNestedValue, strOfurlParamsFunc, setVChartsFields } from '../Utils'

const defaultData = [
    { xField: '2:00', yField: 27, seriesField: 'Sales' },
    { xField: '6:00', yField: 25, seriesField: 'Sales' },
    { xField: '10:00', yField: 18, seriesField: 'Sales' },
    { xField: '14:00', yField: 15, seriesField: 'Sales' },
    { xField: '18:00', yField: 10, seriesField: 'Sales' },
    { xField: '22:00', yField: 5, seriesField: 'Sales' },
    { xField: '2:00', yField: 7, seriesField: 'Discount' },
    { xField: '6:00', yField: 5, seriesField: 'Discount' },
    { xField: '10:00', yField: 38, seriesField: 'Discount' },
    { xField: '14:00', yField: 5, seriesField: 'Discount' },
    { xField: '18:00', yField: 20, seriesField: 'Discount' },
    { xField: '22:00', yField: 15, seriesField: 'Discount' }
]

const array = [
]

const TempChartsA06 = ({ mode, config, apiData }) => {
    const chartRef = useRef()
    const { send } = useRequest(data => Http(data), { immediate: false })
    const [Spec, setSpec] = useState()

    const setSpecFunc = (data) => {

        const { axes_setUp, legends_setUp, type, stack, background, padding, outerRadius, innerRadius, direction, group, ...item } = config || AdminRouter.Chart06
        const { xField, yField } = setVChartsFields(direction, group)
        const axes = ChartsConfig.setAxes(axes_setUp)
        const title = ChartsConfig.setTitle(item)
        const label = ChartsConfig.setLabel(item)
        const tooltip = ChartsConfig.setTooltip(item)
        const crosshair = ChartsConfig.setCrosshair(item)
        const totalLabel = ChartsConfig.setTotalLabel(item)
        const legends = ChartsConfig.setLegends(legends_setUp)
        const rose = ChartsConfig.setRose(item)
        const indicator = ChartsConfig.setIndicator(item, data || defaultData)

        setSpec({
            type,
            data: { values: data || defaultData },
            color: data ? params.dataArr.map(item => item.color || '#13c2c2') : ChartsConfig.DefaultColor,
            stack,
            background,
            padding,
            outerRadius,
            innerRadius,
            categoryField: xField,
            valueField: yField,
            seriesField: 'seriesField',

            axes,
            title,

            label,
            tooltip,
            crosshair,
            totalLabel,
            legends,

            rose,
            indicator
        })
    }

    useEffect(() => {
        if (mode) {
            const { api, apiName, apiMethod, apiUrl, apiParams, level } = mode
            if (api) {
                const data = apiData.find(v => v.name === apiName)
                const levels = level?.split(',')
                const DATA = level ? data?.data[levels.join('.')] : data?.data
                if (DATA && config.field.length !== 0) {
                    const arr = DATA.flatMap(item => {
                        return config.field.map(key => ({
                            uuid: item.uuid,
                            color: key.color,
                            seriesField: key.title,
                            xField: item[key.group],
                            yField: item[key.field],
                        }))
                    })
                    setSpecFunc(arr)
                } else setSpecFunc()
            } else setSpecFunc()
        } else setSpecFunc()
    }, [mode, apiData])

    const optionsData = { disableDirtyBounds: true, options3d: { enable: true, enableView3dTransform: true, center: { x: 500, y: 250 } } }
    if (Spec) return <VChart className='ChartsClass' ref={chartRef} spec={Spec} options={optionsData} />
};

export default TempChartsA06